<template>
  <div class="page">
    <div class="box">
      <div class="page-top">
        <!-- <Header v-show="index == 0"></Header> -->
        <div class="box-k" v-show="index == 0"></div>
        <el-carousel
          :height="showHeight"
          :direction="direction"
          :autoplay="autoplay"
          :indicator-position="indicatorPosition"
          ref="carousel"
        >
          <el-carousel-item>
            <div class="map-box">
              <div class="img-box">
                <img src="../assets/img/project-pages.png" />
                <div class="btn" @click="clickCbd()">
                  <img src="../assets/img/clicke1.gif" />
                </div>
                <div class="btn-w" @click="changeShow()">
                  <img src="../assets/img/clicke2.gif" />
                </div>
              </div>
              <div class="btn-down" @click="changeShow()">
                <img src="../assets/img/down.png" />
              </div>
            </div>
          </el-carousel-item>
          <el-carousel-item>
            <div class="map-box">
              <div class="img-box">
                <img src="../assets/img/4200000.jpg" />
                <div class="btn-s" @click="clickPlay()"></div>
              </div>
              <div class="btn-up">
                <img src="../assets/img/up.png" @click="changeShow()" />
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

      <el-dialog
        :visible.sync="dialogVisible2"
        :title="cbdTitle"
        width="800px"
        top="15%"
      >
        <div class="cdb-box">
          <el-carousel
            arrow="always"
            height="500px"
            :indicator-position="indicatorPosition"
          >
            <el-carousel-item>
              <div class="cdb-1">
                <img src="../assets/img/1.png" />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="cdb-1">
                <img src="../assets/img/2.png" />
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="cdb-1">
                <img src="../assets/img/3.png" />
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-dialog>
      <Mintdilog ref="dilog" />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Mintdilog from "../components/Mintdilog.vue";
export default {
  components: {
    Header,
    Mintdilog
  },
  data() {
    return {
      showHeight: "100%",
      direction: "vertical",
      autoplay: false,
      indicatorPosition: "none",
      index: 0,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      cbdTitle: "检测报告"
    };
  },
  methods: {
    changeShow: function() {
      if (this.index == 0) {
        this.$refs.carousel.setActiveItem(1);
        this.$store.commit("setNav", 1);
        this.index = 1;
        this.$refs.dilog.close();
        this.getClientHeight(1);
      } else {
        this.$refs.carousel.setActiveItem(0);
        this.$store.commit("setNav", 0);
        this.$refs.dilog.close();
        this.index = 0;
        this.getClientHeight(0);
      }
    },
    getClientHeight: function(ste) {
      let clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight =
          document.body.clientHeight < document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      } else {
        clientHeight =
          document.body.clientHeight > document.documentElement.clientHeight
            ? document.body.clientHeight
            : document.documentElement.clientHeight;
      }
      if (ste == 0) {
        this.showHeight = clientHeight - 80 + "px";
      } else {
        this.showHeight = clientHeight + "px";
      }
    },
    clickPlay: function() {
      this.dialogVisible3 = true;
      //显示铸造
      this.$refs.dilog.show();
    },
    handleClose2: function() {
      this.dialogVisible2 = false;
    },
    clickCbd: function() {
      this.dialogVisible2 = true;
    }
  },
  mounted: function() {
    this.getClientHeight(0);
  }
};
</script>
<style scoped>
.box {
  height: 100%;
}

.page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box-k {
  width: 100%;
  height: 80px;
  opacity: 0;
}
.map-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.img-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
}

.page-top {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/deep/ .el-carousel {
  height: 100%;
}

.btn {
  width: 90px;
  position: absolute;
  bottom: 8%;
  right: 9%;
  cursor: pointer;
}

.btn img {
  width: 100%;
}

.btn-w {
  width: 90px;
  position: absolute;
  bottom: 15%;
  right: 43%;
  cursor: pointer;
}

.btn-w img {
  width: 100%;
}

.btn-down {
  width: 60px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  cursor: pointer;
}

.btn-up {
  width: 60px;
  position: absolute;
  left: 48%;
  top: 10px;
  cursor: pointer;
}

.btn-up img {
  width: 100%;
}

.btn-down img {
  width: 100%;
}

.btn-s {
  width: 150px;
  height: 48px;
  position: absolute;
  bottom: 30%;
  right: 12%;
  color: #000;
  font-size: 34px;
  letter-spacing: 5px;
  font-weight: bold;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
}
.cdb-box {
  width: 100%;
}
/deep/ .el-carousel__arrow {
  background-color: #00000042;
}
/deep/ .el-dialog__header {
  text-align: center;
}
.cdb-1 {
  width: 100%;
}
/deep/ .el-dialog__title {
  font-size: 16px;
  font-weight: bold;
}
.box:deep(.el-form-item__label) {
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 48px;
}
.cdb-1 img {
  width: 50%;
  margin: auto;
}
.sub-btn {
  width: 200px;
  height: 46px;
  background-color: #6d95e5;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin: 30px auto;
  line-height: 46px;
  border-radius: 5px;
  cursor: pointer;
}
/deep/ .el-dialog {
  background: #cfcfcf8f;
  border-radius: 5px;
}
/deep/ .el-dialog__title {
  color: #fff;
  font-size: 28px;
}
/deep/ .el-dialog__close {
  color: #fff;
  font-size: 28px;
}

.box-form {
  width: 400px;
  margin: auto;
}
.box:deep(.el-form-item) {
  padding-bottom: 20px;
}
.box:deep(.el-form-item) {
  height: 48px;

  line-height: 48px;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  font-size: 24px;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  font-size: 24px;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  font-size: 24px;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  font-size: 24px;
}
.step-box {
  width: 50%;
  margin: 30px auto;
  margin-top: 100px;
}
</style>
